<template>
  <transition name="mini">
    <div class="mini-player" @click="expandFullScreen">
      <div
        class="progress-bar"
        :style="{ width: `${playProgress * 100}%` }"
      ></div>
      <div class="cd-wrapper">
        <img :src="currentSong.pic" alt="" />
      </div>
      <div class="info">
        <div class="name">{{ currentSong.name }}</div>
        <div class="singer">{{ currentSong.singer }}</div>
      </div>
      <div class="controls">
        <i
          class="iconfont"
          :class="controlIcon"
          @click.prevent.stop="togglePlay"
        ></i>
      </div>
      <div class="play-list">
        <i class="iconfont purple-prev-next" @click.prevent.stop="next"></i>
      </div>
    </div>
  </transition>
</template>

<script>
import { computed } from '@vue/runtime-core'
import { useStore } from 'vuex'
export default {
  name: 'MiniPlayer',
  props: {
    togglePlay: {
      required: true,
      type: Function
    },
    next: {
      required: true,
      type: Function
    },
    playProgress: {
      type: Number,
      default: 0
    }
  },
  setup() {
    const { state, getters, commit } = useStore()
    const currentSong = computed(() => {
      return getters['play/currentSong']
    })

    const playing = computed(() => {
      return state.play.playing
    })

    const controlIcon = computed(() => {
      return !playing.value ? 'purple-play2' : 'purple-pause2'
    })

    function expandFullScreen() {
      commit('play/setFullScreen', true)
    }

    return {
      currentSong,
      controlIcon,
      expandFullScreen
    }
  }
}
</script>

<style lang="scss">
.mini-player {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  border-top: 1px solid rgb(245, 169, 196);
  .progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    margin-top: -1px;
    border-top: 1px solid red;
  }
  .cd-wrapper {
    > img {
      width: 40px;
      height: 40%;
      border-radius: 5px;
    }
  }
  .info {
    flex: 1;
    padding: 0 15px;
    .name {
      @include no-wrap;
      margin-bottom: 5px;
      font-size: 14px;
      color: $color-list-title;
    }
    .singer {
      @include no-wrap;
      font-size: 12px;
      color: rgb(245, 169, 196);
    }
  }
  .controls {
    > i {
      font-size: 30px;
      color: $color-list-title;
    }
  }
  .play-list {
    display: flex;
    margin-left: 10px;
    > i {
      font-size: 22px;
      font-weight: bold;
      color: $color-list-title;
      transform: rotate(180deg);
    }
  }
}
.mini-enter-from,
.mini-leave-to {
  transform: translate3d(0, 100%, 0);
}
.mini-enter-active,
.mini-leave-active {
  transition: transform 0.3s ease;
}
</style>
